<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium)

// 等组件挂载成功后实例
onMounted(async () => {
  const defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZTU0NzgzYS0xNWNjLTRmZmEtOGQzMi1lY2JmM2IwNzUzMjIiLCJpZCI6MjUwMzcwLCJpYXQiOjE3Mjk3MzU0OTN9.ulTss00xhgzkk6fqIWqBvlIqfO3A0xMEtYUrST9zTL8'

  Cesium.Ion.defaultAccessToken = defaultAccessToken
  // ArcGis 影像图层
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    ulr: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
  })
  // 所有API的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: esri,
  })
})
</script>



<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
